<template>
  <div class="order">
    <div class="title">我的订单</div>
    <div class="order-content">
      <el-button v-show="role == 0" type="primary" size="small" @click="createOrder">新建订单</el-button>
      <hr v-show="role == 0" class="order-hr">
      <el-date-picker v-model="filter.time" type="daterange" placeholder="选择申请时间">
      </el-date-picker>
      <el-input v-show="role == 1" class="order-input-selemanName" placeholder="请输入名称" v-model="salemanName">
        <el-select v-model="salemanNameSele" slot="prepend" placeholder="业务员" class="order-input-name">
          <div v-for="vm in salemanNameList">
            <el-option :label="vm" :value="vm"></el-option>
          </div>
        </el-select>
        <el-button slot="append" icon="search"></el-button>
      </el-input>
      <el-input class="order-input-filter" placeholder="请输入姓名/身份证号/车牌号/手机号码" v-model="filter.text">
        <el-button slot="append" icon="search"></el-button>
      </el-input>
      <el-table class="order-table" :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="订单编号" width="130">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="code" label="身份证号" width="200">
        </el-table-column>
        <el-table-column prop="type" label="车型" width="100">
        </el-table-column>
        <el-table-column prop="bark" label="贷款银行" :filters="filter.barkList" :filter-method="filterTag" filter-placement="bottom-end" width="120">
        </el-table-column>
        <el-table-column prop="money" label="贷款金额" width="100">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="130">
        </el-table-column>
        <el-table-column prop="status" label="状态" :filters="filter.statusList" :filter-method="filterTag" filter-placement="bottom-end" width="150">
          <template scope="scope">
            <el-tag v-if="scope.row.status == '征信结果待录入' || scope.row.status == '征信结果已录入' || scope.row.status == '申请附条件通过'" :type="'primary'">{{scope.row.status}}</el-tag>
            <el-tag v-else-if="scope.row.status == '已结清' || scope.row.status == '申请通过' || scope.row.status == '财务已垫款' || scope.row.status == '银行已放款'" :type="'success'">{{scope.row.status}}</el-tag>
            <el-tag v-else-if="scope.row.status == '申请不通过'" :type="'danger'">{{scope.row.status}}</el-tag>
            <el-tag v-else-if="scope.row.status == '作废'" :type="'gray'">{{scope.row.status}}</el-tag>
            <el-tag v-else>{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="申请时间" sortable width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
          <template scope="scope">
            <el-button @click.native.prevent="info(scope.$index, tableData)" type="text" size="small">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="order-pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="tablePage.page" :page-sizes="[10, 20, 30, 40]" :page-size="tablePage.num" layout="sizes, prev, pager, next" :total="tablePage.pager">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'order',
  components: {},
  data() {
    return {
      role: 0, //0-业务员 1-业务经理
      salemanName: '', //业务员名称
      salemanNameSele: '',
      salemanNameList: ['名称1', '名称2', '名称3'],
      filter: {
        time: '',
        text: '',
        statusList: [
          { text: '征信结果待录入', value: 1 },
          { text: '征信结果已录入', value: 2 },
          { text: '审核中', value: 3 },
          { text: '已结清', value: 4 },
          { text: '申请通过', value: 5 },
          { text: '申请不通过', value: 6 },
          { text: '申请附条件通过', value: 7 },
          { text: '财务已垫款', value: 8 },
          { text: '银行已放款', value: 9 },
          { text: '作废', value: 0 },
        ],
        barkList: [
          { text: '建设银行', value: '建设银行' },
          { text: '招商银行', value: '招商银行' },
          { text: '杭州银行', value: '杭州银行' },
        ]
      },
      tableData: [{
          id: 'Zj8020170081',
          name: '杨过',
          code: '330101199010102112',
          type: '五菱宏光',
          bark: '招商银行',
          money: '500000',
          phone: '18605710055',
          status: '征信结果待录入',
          time: '2014-12-24',
        },
        {
          id: 'Zj8020170081',
          name: '杨过',
          code: '330101199010102112',
          type: '五菱宏光',
          bark: '招商银行',
          money: '500000',
          phone: '18605710055',
          status: '申请通过',
          time: '2014-12-25',
        }
      ],
      tablePage: {
        pager: 100, //总页数
        page: 1, //当前页数
        num: 10, //每页条数
      }
    }
  },
  methods: {
    createOrder:function () {
      this.$router.push({path:'/salesman/NewOrder'})
    },
    filterTag(value, row) {
      return row.status === value;
    },
    info(index, rows) {

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  mounted() {}
}

</script>
<style lang="scss" scoped>
.order {
  padding: 10px;
  background: #F7F7F7;
  .title {
    color: #99A9BF;
    font-size: 14px;
    line-height: 18px;
    margin: 8px 0px 10px 0px;
  }
  .order-content {
    background: #fff;
    padding: 20px;
    .order-hr {
      margin: 20px 0px 30px 0px;
      background: #D3DCE6;
    }
    .order-input-selemanName {
      width: 300px;
      .order-input-name {
        width: 90px;
      }
    }
    .order-input-filter {
      float: right;
      width: 320px;
    }
    .order-table {
      margin: 20px 0px;
    }
    .order-pagination {
      text-align: center;
    }
  }
}

</style>
